<template>
	<div class="ele-body">
		<div class="daohang">
			<div class="title">角色管理</div>
		</div>
		<div style="padding: 20px;background-color:  #fff;" class="top-con">
			<div>
				<el-row>
				<el-col  :span="22">
					<el-col :span="6" style="align-items: center;">
						<el-input v-model.number="keyword" placeholder="请输入角色名称搜索" style="width: 300px;"></el-input>
					</el-col >
				</el-col>
					
					
					<el-col :span="2">
							<el-button type="warning" @click="search">搜索</el-button>
					</el-col>
							
				</el-row>
				<div class="con-item">

				</div>
			</div>
		</div>
		<div class="top-btn">
			<div class="top-con">
				<div class="con-item">
					<el-button type="success" @click="add()">添加</el-button>
				</div>
			</div>
			<div class="top-con">

				
			</div>
		</div>

		<el-drawer :show-close="true" size="280px" title="表格字段" :visible.sync="drawer">
			<div>
				<rightbiao :ziduanlist='ziduanlist' @xuanzebiao="xuanzebiao($event)"></rightbiao>
			</div>
		</el-drawer>
		<div style="margin-top: 30px;">
			<el-table :data="tableData" stripe style="width: 100%"
				:header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" border>
				<el-table-column prop="id" label="id"
					min-width="80"></el-table-column>
				<el-table-column prop="name" label="角色名"
					min-width="80"></el-table-column>
					<el-table-column  label="状态操作"  sortabl  width="100">
						<template slot-scope="scope">
						<el-switch
						  v-model="scope.row.status"
						  active-color="#13ce66"
						  inactive-color="#ff4949"
						  active-value="normal" inactive-value="hidden"
						  @change="switchchange($event,scope.row)"
						  >
						</el-switch>
						
						</template>
					
					</el-table-column>
				<el-table-column label="操作" min-width="200">
					<template slot-scope="scope">
						<el-button type="primary" @click="edit(scope.row)">编辑</el-button>
						<el-button type="danger" @click="clear(scope.row)" v-if="scope.row.id!==1">删除</el-button>
						<el-link  v-if="scope.row.id!==1"
						  type="primary"
						  :underline="false"
						  icon="el-icon-finished"
						  @click="openAuth(scope.row)"
						 >分配权限
						</el-link>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog :title="form.id?'编辑':'添加'" :visible.sync="dialogVisible" width="30%">
			<span>
				<el-form ref="form" :model="form" :inline="true" label-width="120px">
				
				
					<el-form-item label="名称" :required="true">
						<el-col>
							<el-input v-model="form.name" style="width: 200px;"></el-input>
						</el-col>
					</el-form-item>
					
				
				</el-form>


			</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</span>
		</el-dialog>
		<div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) ;z-index: 999;">
			<el-popover placement="top" width="160" v-model="visiblea">
				<p>确定删除吗？</p>
				<div style="text-align: right; margin: 0">
					<el-button size="mini" type="text" @click="visiblea = false">取消</el-button>
					<el-button type="primary" size="mini" @click="cleara">确定</el-button>
				</div>
			</el-popover>
		</div>
		<div class="block" style="margin-top: 18px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
				:page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<role-auth
		  :data="current"
		  :visible.sync="showAuth"/>
	</div>
</template>

<script>
	import rightbiao from '@/components/rightbiao/rightbiao'
	import setting from '@/config/setting';
	import { mapGetters } from "vuex";
	import RoleAuth from './role-auth';
	
	export default {
		components: { rightbiao, RoleAuth},
		computed: {
		  ...mapGetters(["permission"]),
		},
		data() {
			return {
				showAuth:false,
				current:{},
				keyword:'',
				url: process.env.VUE_APP_API_BASE_URL,
				headers: {
					token: setting.takeToken()
				},
				username: '',
				status: '',
				nikename: '',
				collection_id: '',
				group_id: '',
				zhuangtai: '',
				fenleilist:[],
				value1: '',
				jueselist:[],
				zhuangtailist:[
					{ value: 'normal',label: '启用'},
					{ value: 'hidden',label: '禁用'},
				
				],
				
				table_name: '',
				visiblea: false,
				formLabelWidth: '120px',
				form: {},
				dialogVisible: false,
				ziduanlist: '',
				drawer: false,
				page: 1,
				total: 0,
				tableData: [],
				clearid: '',
			


				
				
			}
		},
		mounted() {
			// this.getfenleilist('0')
			this.getjueselist()
			this.getlist();
			
			// this.getduzheleixing()
			// this.getbumen()
			// this.getyajin()
			// this.getpaylist();
		},
		methods: {
			switchchange($event,row){
				console.log($event)
				console.log(row) 
				 this.$http.post('/back/auth/group/status',{id:row.id}).then((res) => {
				 	if (res.data.code == 1) {
				 		this.$message({
				 			message: res.data.msg,
				 			type: 'success'
				 		});
				 		this.getlist();
				 	} else {
				 		this.$message.error(res.data.msg);
				 	}
				 });
				
			},
			handleAvatarSuccess(res) {
				this.$set(this.form, 'avatar', res.data.url)
			},
			// getfenleilist(id) {
			// 	this.$http.post('/back/readers_type/collection_list',{id}
			// 	 ).then(res => {
			// 		if (res.data.code === 1) {
			// 			this.fenleilist=[] 
			// 			this.fenleilist = res.data.data
			// 			console.log('馆藏地',this.fenleilist)
			// 		} else {
			// 			this.$message.error(res.data.msg || '获取数据失败');
			// 		}
			// 	})
			// },
			getjueselist() {
				this.$http.get('/back/auth/admin/getGroupList'
				 ).then(res => {
					if (res.data.code === 1) {
						this.jueselist=[] 
						this.jueselist = res.data.data
						console.log('角色',this.jueselist)
					} else {
						this.$message.error(res.data.msg || '获取数据失败');
					}
				})
			},
			add() {
				
				this.form = {}
				this.form = {
						name:'',
						
						
					},
					// this.form.pid=0
					this.dialogVisible = true;
			},
			openAuth(row) {
			  this.current = row;
			  this.showAuth = true;
			},
		
			
			
			edit(row) {
				this.form = row;
				this.form.password=''
				console.log(row)
				this.dialogVisible = true;
			},
			clear(row) {
				this.visiblea = true
				console.log('这是要删除的row', row)


				this.clearid = row.id.toString()
			},
			cleara() {
				let id = this.clearid
				this.visiblea = false
				this.$http.post('/back/auth/group/del', {
					id: id
				}).then(res => {
					if (res.data.code == 1) {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.getlist();

					} else {
						this.$message.error(res.data.msg);
					}
				})
			},
			submit() {
				console.log(this.form)
				let a = {}
				a = this.form
				console.log('这是要穿的数据', a)
				if(!a.name){
					this.$message.error('请填写角色名称')
					return
				}
				this.$http.post('/back/auth/group/edit', a).then((res) => {
					if (res.data.code == 1) {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.getlist();
						this.dialogVisible = false;
					} else {
						this.$message.error(res.data.msg);
					}
				});
			},

			deepCopy(newobj, oldobj) {
				let that = this
				// 遍历oldobj的属性名
				for (var k in oldobj) {
					// 判断属性属于哪种数据类型
					// 1.获取属性值 oldobj[k]
					var item = oldobj[k];
					// 2.判断是否属于数组(因为数组也属于对象，所以必须先判断数组)
					if (item instanceof Array) {
						newobj[k] = []; // (1)先给newobj添加一个属性k，同oldobj里的k
						that.deepCopy(newobj[k], item) // (2)再用oldobj[k]赋值给newobj[k]
					} else if (item instanceof Object) {
						// 3.判断是否属于对象
						newobj[k] = {};
						that.deepCopy(newobj[k], item)
					} else {
						// 4.属于简单数据类型
						newobj[k] = item
					}

				}
			},
			xuanzebiao(list) {
				let a = []
				this.deepCopy(a, list)
				for (let item of a) {
					if (item.status == true) {
						item.status = 'true'
					} else {
						item.status = 'false'
					}
				}

				this.$http.post('/back/Fieldset/edit', {
					list: a
				}).then((res) => {
					if (res.data.code == 1) {
						this.page = 1;
						this.getlist();
						this.drawer = false
					}
				});
			},

		
			//查询条件
			search() {
				this.page = 1;
				this.getlist();
			},
			//获取列表
			getlist() {
				// tsgnew.cn/back/auth/group/index?page=1&size=10
				this.$http.get(
					`/back/auth/group/index?page=${this.page}&size=10&keyword=${this.keyword}`
				).then(res => {
					if (res.data.code === 1) {
						this.tableData = res.data.data.data;
						console.log('1212', this.tableData)
						this.total = this.tableData.total;
					
					
					} else {
						this.$message.error(res.data.msg || '获取数据失败');
					}
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.page = val;
				this.getlist();
			},
		},

	}
</script>

<style lang="scss">
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 200px;
		height: 200px;
		line-height: 200px;
		text-align: center;
	}
	
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	.daohang {
		padding: 10px 0;
		display: flex;
		align-items: center;
		color: black;

		.title {
			font-size: 16px;
			font-weight: bold;
		}

	}

	.top-btn {
		padding: 20px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.top-con {
			display: flex;
			align-items: center;

			.con-item {
				margin-right: 10px;
			}
		}

	}

	.top-con {
		display: flex;
		align-items: center;

		.con-item {
			margin-right: 10px;
		}
	}
</style>